// 待办事项数组
let todos = [];
// 当前活动标签（默认未完成）
let activeTab = 'active';
// 检测是否在Chrome扩展环境中
const isChromeExtension = typeof chrome !== 'undefined' && chrome.storage && chrome.storage.sync;

// 公共工具函数
const utils = {
  // 根据ID查找待办事项
  findTodoById: (id) => todos.find(todo => todo.id === id),
  
  // 保存并更新UI
  saveAndUpdate: () => {
    saveTodos();
    renderTodos();
    updateStats();
  },
  
  // 创建DOM元素
  createElement: (tag, className = '', textContent = '') => {
    const element = document.createElement(tag);
    if (className) element.className = className;
    if (textContent) element.textContent = textContent;
    return element;
  },
  
  // 添加事件监听器
  addEventListener: (element, event, handler) => {
    element.addEventListener(event, handler);
  },
  
  // 获取待办事项统计
  getTodoStats: () => ({
    total: todos.length,
    active: todos.filter(todo => !todo.completed).length,
    completed: todos.filter(todo => todo.completed).length
  }),
  
  // 批量绑定事件监听器
  bindEvents: (events) => {
    events.forEach(({ element, event, handler }) => {
      element.addEventListener(event, handler);
    });
  },
  
  // 数据操作函数
  data: {
    // 添加待办事项
    addTodo: (todo) => {
      todos.push(todo);
    },
    
    // 删除待办事项
    removeTodo: (id) => {
      todos = todos.filter(todo => todo.id !== id);
    },
    
    // 过滤待办事项
    filterTodos: (predicate) => todos.filter(predicate),
    
    // 获取置顶任务数量
    getPinnedCount: () => todos.filter(t => t.pinned && !t.completed).length,
    
    // 清空所有待办事项
    clearAll: () => {
      todos = [];
    },
    
    // 清空已完成待办事项
    clearCompleted: () => {
      todos = todos.filter(todo => !todo.completed);
    },
    
    // 根据标签页过滤待办事项
    filterByTab: (tab) => {
      switch (tab) {
        case 'active':
          return todos.filter(todo => !todo.completed);
        case 'completed':
          return todos.filter(todo => todo.completed);
        default:
          return [...todos];
      }
    },
    
    // 排序待办事项
    sortTodos: (todosArray) => {
      return todosArray.sort((a, b) => {
        // 先按置顶状态排序
        if (a.pinned && !b.pinned) return -1;
        if (!a.pinned && b.pinned) return 1;
        // 置顶状态相同，按完成状态排序
        if (a.completed === b.completed) {
          return b.id - a.id; // 相同状态时，新添加的在前
        }
        return a.completed ? 1 : -1; // 未完成的在前
      });
    }
  }
};

// DOM元素
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// 标签页元素
const tabActive = document.getElementById('tab-active');
const tabCompleted = document.getElementById('tab-completed');
// 标签页数量元素
const activeCountElement = document.getElementById('active-count');
const completedCountTabElement = document.getElementById('completed-count-tab');
// footer
const taskCountElement = document.getElementById('task-count');

const clearCompletedBtn = document.getElementById('clear-completed');
const clearAllBtn = document.getElementById('clear-all');


// 更新当前时间显示
function updateCurrentTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const timeElement = document.getElementById('current-time');
  
  // 显示年月日和时分秒
  timeElement.innerHTML = `${year}-${month}-${day}  ${hours}:${minutes}:<span class="seconds">${seconds}</span>`;
  
  // 为秒数添加轻微的缩放动画
  const secondsElement = timeElement.querySelector('.seconds');
  secondsElement.style.transition = 'transform 0.1s ease';
  secondsElement.style.transform = 'scale(1.1)';
  setTimeout(() => {
    secondsElement.style.transform = 'scale(1)';
  }, 100);
}

// 初始化
function init() {
  // 更新时间显示
  updateCurrentTime();
  // 每秒更新一次时间
  setInterval(updateCurrentTime, 1000);
  
  // 加载待办事项
  if (isChromeExtension) {
    // Chrome扩展环境
    chrome.storage.sync.get(['todos'], function(result) {
      if (result.todos && Array.isArray(result.todos)) {
        todos = result.todos;
        renderTodos();
        updateStats();
      }
    });
  } else {
    // 普通浏览器环境，使用localStorage
    const savedTodos = localStorage.getItem('todos');
    if (savedTodos) {
      try {
        todos = JSON.parse(savedTodos);
        renderTodos();
        updateStats();
      } catch (e) {
        console.error('Failed to parse saved todos:', e);
      }
    }
  }

  // 事件监听
  utils.bindEvents([
    { element: addBtn, event: 'click', handler: addTodo },
    { element: todoInput, event: 'keypress', handler: function(e) {
      if (e.key === 'Enter') {
        addTodo();
      }
    }},
    { element: clearCompletedBtn, event: 'click', handler: clearCompleted },
    { element: clearAllBtn, event: 'click', handler: clearAll },
    { element: tabActive, event: 'click', handler: () => switchTab('active') },
    { element: tabCompleted, event: 'click', handler: () => switchTab('completed') }
  ]);
}

// 切换标签页
function switchTab(tabName) {
  // 只有当点击的标签与当前活动标签不同时才执行切换
  if (activeTab === tabName) return;
  
  // 先移除所有标签的active状态
  tabActive.classList.remove('active');
  tabCompleted.classList.remove('active');
  
  // 短暂延迟后添加新标签的active状态，确保动画能够正确触发
  setTimeout(() => {
    activeTab = tabName;
    
    if (tabName === 'active') {
      tabActive.classList.add('active');
    } else if (tabName === 'completed') {
      tabCompleted.classList.add('active');
    }
    
    // 重新渲染待办事项
    renderTodos();
  }, 50); // 50ms的延迟足够触发动画过渡效果
}

// 添加待办事项
function addTodo() {
  // 检查是否在编辑模式
  if (todoInput.dataset.editingId) {
    saveEditedTodo();
    return;
  }
  
  const text = todoInput.value.trim();
  if (text) {
    const todo = {
      id: Date.now(),
      text: text,
      completed: false,
      pinned: false,
      date: new Date().toLocaleString()
    };
    
    utils.data.addTodo(todo);
    saveTodos();
    
    // 如果当前不在未完成标签页，则自动切换到未完成标签页
    if (activeTab !== 'active') {
      switchTab('active');
    } else {
      renderTodos();
    }
    
    updateStats();
    todoInput.value = '';
  }
}

// 删除待办事项
function deleteTodo(id) {
  // 在删除前，如果任务是置顶状态，先取消置顶
  const todo = utils.findTodoById(id);
  if (todo && todo.pinned) {
    todo.pinned = false;
  }
  
  utils.data.removeTodo(id);
  utils.saveAndUpdate();
}

// 切换完成状态
function toggleTodo(id) {
  const todo = utils.findTodoById(id);
  if (todo) {
    const newCompletedState = !todo.completed;
    
    // 如果任务被标记为完成，自动取消置顶
    const newPinnedState = newCompletedState ? false : todo.pinned;
    
    todo.completed = newCompletedState;
    todo.pinned = newPinnedState;
    
    // 当任务完成时添加完成时间，取消完成时移除完成时间
    todo.completedAt = newCompletedState ? new Date().toLocaleString() : null;
    
    utils.saveAndUpdate();
  }
}

// 置顶/取消置顶任务
function pinTodo(id) {
  const todo = utils.findTodoById(id);
  if (todo) {
    // 如果是要置顶，检查当前置顶数量
    if (!todo.pinned) {
      const pinnedCount = utils.data.getPinnedCount();
      if (pinnedCount >= 3) {
        alert('最多只能置顶3个任务');
        return;
      }
    }
    todo.pinned = !todo.pinned;
    saveTodos();
    renderTodos();
  }
}

// 编辑任务
function editTodo(id) {
  const todo = utils.findTodoById(id);
  if (todo) {
    // 将任务内容显示在输入框中
    todoInput.value = todo.text;
    
    // 设置编辑模式
    todoInput.dataset.editingId = id;
    
    // 更改按钮文本为"编辑"
    addBtn.textContent = '编辑';
    
    // 聚焦到输入框
    todoInput.focus();
  }
}

// 保存编辑的任务
function saveEditedTodo() {
  const editingId = todoInput.dataset.editingId;
  const text = todoInput.value.trim();
  
  if (text && editingId) {
    const todo = utils.findTodoById(parseInt(editingId));
    if (todo) {
      todo.text = text;
      utils.saveAndUpdate();
    }
  }
  
  // 重置编辑状态
  resetEditMode();
}

// 重置编辑模式
function resetEditMode() {
  todoInput.value = '';
  delete todoInput.dataset.editingId;
  addBtn.textContent = '添加';
}

// 清除已完成的待办事项
function clearCompleted() {
  utils.data.clearCompleted();
  utils.saveAndUpdate();
}

// 清空所有待办事项
function clearAll() {
  if (confirm('确定要清空所有待办事项吗？')) {
    utils.data.clearAll();
    utils.saveAndUpdate();
  }
}


// 为方便用户管理，可以在todo-item中添加批量操作按钮
// 这里保留删除单个任务的功能，通过任务项上的删除按钮实现



// 渲染待办事项列表
function renderTodos() {
  todoList.innerHTML = '';
  
  // 根据当前标签页过滤待办事项
  const filteredTodos = utils.data.filterByTab(activeTab);
  
  // 按置顶状态和完成状态排序，置顶的任务排在前面
  const sortedTodos = utils.data.sortTodos(filteredTodos);
  
  sortedTodos.forEach(todo => {
    const li = utils.createElement('li', `todo-item ${todo.completed ? 'completed' : ''} ${todo.pinned ? 'pinned' : ''}`);
    // 添加tabindex属性使元素可聚焦
    li.tabIndex = 0;
    
    // 创建主内容容器 - 包裹input和text
    const contentContainer = utils.createElement('div', 'todo-content');
    
    // 创建置顶标记容器
    const pinContainer = utils.createElement('div', 'pin-container');
    
    // 置顶标记
    if (todo.pinned) {
      const pinBadge = utils.createElement('span', 'pin-badge', '\u2191');
      pinContainer.appendChild(pinBadge);
    }
    
    // 将原来的checkbox改为完成按钮
    const completeBtn = utils.createElement('input');
    
    completeBtn.type = 'checkbox';
    completeBtn.checked = todo.completed;
    utils.addEventListener(completeBtn, 'click', () => toggleTodo(todo.id));
    
    // 添加到内容容器
    contentContainer.appendChild(pinContainer);
    
    const div = utils.createElement('div', 'todo-text', todo.text);
    
    // 将input和text添加到内容容器
    contentContainer.appendChild(completeBtn);
    contentContainer.appendChild(div);
    
    
    // 创建时间信息容器
    const timeInfo = utils.createElement('div', 'todo-time-info');
    
    // 创建时间
    const createdAt = utils.createElement('div', 'todo-created-time', `创建: ${todo.date}`);
    
    // 直接将创建时间添加到timeInfo
    timeInfo.appendChild(createdAt);
    
    // 完成时间（如果已完成）
    if (todo.completed && todo.completedAt) {
      const completedAt = utils.createElement('div', 'todo-completed-time', `完成: ${todo.completedAt}`);
      timeInfo.appendChild(completedAt);
    }
    
    // 创建操作按钮容器
    const actionsContainer = utils.createElement('div', 'todo-actions');
    
    // 编辑按钮（只对未完成任务显示）
    if (!todo.completed) {
      const editBtn = utils.createElement('button', 'edit-btn', '编辑');
      utils.addEventListener(editBtn, 'click', () => editTodo(todo.id));
      actionsContainer.appendChild(editBtn);
    }
    
    // 置顶/取消置顶按钮（只对未完成任务显示）
    if (!todo.completed) {
      const pinBtn = utils.createElement('button', `pin-btn ${todo.pinned ? 'pinned' : ''}`, todo.pinned ? '取消置顶' : '置顶');
      utils.addEventListener(pinBtn, 'click', () => pinTodo(todo.id));
      actionsContainer.appendChild(pinBtn);
    }
    
    const deleteBtn = utils.createElement('button', 'delete-btn', '删除任务');
    utils.addEventListener(deleteBtn, 'click', () => deleteTodo(todo.id));
    
    // 将删除按钮添加到操作容器
    actionsContainer.appendChild(deleteBtn);
    
    // 重新组织DOM结构
    li.appendChild(contentContainer);
    li.appendChild(timeInfo);
    li.appendChild(actionsContainer);
    todoList.appendChild(li);
  });
  
  // 当没有待办项时显示提示信息
  if (filteredTodos.length === 0) {
    const emptyState = utils.createElement('div', 'empty-state', '暂无任务');
    todoList.appendChild(emptyState);
  }
}

// 添加数字变化动画效果
function animateCount(element, newValue) {
  // 保存原始值和新值
  const oldValue = parseInt(element.textContent) || 0;
  
  // 只有当值确实发生变化时才添加动画
  if (oldValue !== newValue) {
    // 添加动画类
    element.classList.add('count-animation');
    
    // 设置新值
    element.textContent = newValue;
    
    // 动画结束后移除动画类
    setTimeout(() => {
      element.classList.remove('count-animation');
    }, 600);
  }
}

// 更新统计信息
function updateStats() {
  const stats = utils.getTodoStats();
  
  taskCountElement.textContent = `总任务数: ${stats.total}`;
  
  // 更新标签页上的任务数量并添加动画效果
  animateCount(activeCountElement, stats.active);
  animateCount(completedCountTabElement, stats.completed);
}

// 保存待办事项
function saveTodos() {
  if (isChromeExtension) {
    // Chrome扩展环境
    chrome.storage.sync.set({ todos: todos }, function() {
      console.log('待办事项已保存');
    });
  } else {
    // 普通浏览器环境，使用localStorage
    try {
      localStorage.setItem('todos', JSON.stringify(todos));
      console.log('待办事项已保存到localStorage');
    } catch (e) {
      console.error('Failed to save todos:', e);
    }
  }
}

// 当DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', init);